<script setup lang="ts">
import { poleAddApi, poleEditApi } from '@/apis/rod'
import type { PoleI } from '@/types/rod'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const props = defineProps(['dialogVisible', 'areaList', 'dialogParams'])
const emit = defineEmits([
  'update:dialogVisible',
  'success',
  'update:dialogParams',
])
const title = ref('添加一体杆')
const defaultParams = {
  id: undefined,
  poleName: '',
  poleNumber: '',
  poleIp: '',
  areaId: undefined,
  poleType: '',
}
const params = ref<PoleI>({
  id: undefined,
  poleName: '',
  poleNumber: '',
  poleIp: '',
  areaId: undefined,
  poleType: '',
})
const rules = {
  poleName: [{ required: true, message: '请输入一体杆名称', trigger: 'blur' }],
  poleNumber: [
    { required: true, message: '请输入一体杆编号', trigger: 'blur' },
  ],
  poleIp: [{ required: true, message: '请输入一体杆IP', trigger: 'blur' }],
  areaId: [{ required: true, message: '请选择关联区域', trigger: 'blur' }],
  poleType: [{ required: true, message: '请选择一体杆类型', trigger: 'blur' }],
}
const formRef = ref()
const closeDialog = () => {
  emit('update:dialogVisible', false)
  emit('update:dialogParams', { ...defaultParams })
  formRef.value.resetFields()
  params.value = { ...defaultParams }
}
const openDialog = () => {
  params.value = { ...props.dialogParams }
}
const onSubmit = async () => {
  await formRef.value.validate()

  if (params.value.id) {
    await poleEditApi(params.value)
    ElMessage.success('编辑成功~')
  } else {
    await poleAddApi(params.value)
    ElMessage.success('添加成功~')
  }

  closeDialog()
  emit('success')
}
</script>

<template>
  <el-dialog
    :model-value="dialogVisible"
    width="35%"
    :title="title"
    top="5vh"
    @close="closeDialog"
    @open="openDialog"
  >
    <el-form
      style="width: 70%; margin: 10px auto"
      label-position="top"
      :model="params"
      :rules="rules"
      ref="formRef"
    >
      <el-form-item label="一体杆名称" prop="poleName">
        <el-input placeholder="请输入一体杆名称" v-model="params.poleName" />
      </el-form-item>
      <el-form-item label="一体杆编号" prop="poleNumber">
        <el-input placeholder="请输入一体杆编号" v-model="params.poleNumber" />
      </el-form-item>
      <el-form-item label="一体杆IP" prop="poleIp">
        <el-input placeholder="请输入一体杆IP" v-model="params.poleIp" />
      </el-form-item>
      <el-form-item label="关联区域" prop="areaId">
        <el-select placeholder="请选择关联区域" v-model="params.areaId">
          <el-option
            v-for="item in areaList"
            :label="item.areaName"
            :value="item.areaId"
            :key="item.areaId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="一体杆类型" prop="poleType">
        <el-select placeholder="请选择一体杆类型" v-model="params.poleType">
          <el-option label="入口" :value="'entrance'" />
          <el-option label="出口" :value="'export'" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-form {
  ::v-deep(.el-form-item__label) {
    color: rgb(39, 39, 39);
    font-weight: 500;
  }
}
</style>
